<template>
	<view style="background-color: #fff;">
		<!-- 二维码开始 -->
		<view class="title-bg">
			<view class="status">
				<image src="/static/pay/pay_buy.png" mode=""></image>
				<text class="sta">待支付</text>
				<text class="price">¥10000.00</text>
			</view>
			<view style="font-size: 24rpx;line-height: 46rpx;color: #fff;">
				请在 <text style="color: #a828a1;padding: 0 10rpx;">0小时30分06秒</text> 内完成支付  
			</view>
		</view>
		
		<!-- 表单开始 -->
		<view style="padding: 0 36rpx;margin-top: 30rpx;background-color: #fff;">
			<view class="form">
				<view class="active">
					<image src="" mode=""></image>
				</view>
				<view class="active-r">
					<text class="title">6月23日周日9：00多感官体验大挑 战极限乐趣 快快报名</text>
					<view class="price-pos">
						<text>¥10000.00</text>
						<text>第一排+09座</text>
					</view>
				</view>
			</view>
			<view v-show="false">
				<view class="list">
					<text>宝宝姓名</text>
					<text>林夕</text>
				</view>
				<view class="list">
					<text>多选择一个</text>
					<text>111</text>
				</view>
				<view class="list">
					<text>多选框</text>
					<text>11</text>
				</view>
				<view class="list" style="display: flex;align-items: center;">
					<text>宝宝照片</text>
					<image src="" mode="" style="width: 40rpx;height: 40rpx;background-color: #fe8700;border-radius: 10rpx;line-height: 40rpx;"></image>
				</view>
				<view class="list">
					<text>宝宝生日</text>
					<text>2018-01-02</text>
				</view>
			</view>
			
		</view>
		<view style="height: 20rpx;background-color: #f1f2f6;"></view>
		
		<!-- 适用门店开始 -->
		<view style="padding: 0 36rpx;background-color: #fff;">
			<view class="apply-shop">
				<view class="title">适用门店</view>
				<text>2家</text>
				<view class="iconfont icon-xiangxia1" style="color: #acb3bb;margin-left: 5px;font-size: 24rpx;"></view>
			</view>
			<view class="list" style="line-height: 100rpx;border-top: none;border-bottom: 1rpx solid #e6e6e6;">
				<text>金宝贝天天家园中心</text>
				<text style="font-size: 24rpx;color: #999999;">查看</text>
			</view>
			<view class="list" style="line-height: 100rpx;border-top: none;border-bottom: 1rpx solid #e6e6e6;">
				<text>金宝贝天天家园中心</text>
				<text style="font-size: 24rpx;color: #999999;">查看</text>
			</view>
			<view class="more-shop">查看更多</view>
		</view>
		<view style="height: 20rpx;background-color: #f1f2f6;"></view>
		<view class="order">
			<view>
				<text>订单编号</text>
				<text>74384739304</text>
			</view>
			<view>
				<text>创建时间</text>
				<text>2019-01-01 01:11:11</text>
			</view>
			<view>
				<text>支付时间</text>
				<text>2019-01-01 01:11:11</text>
			</view>
		</view>
		<view class="refund-btn" @click="rightAwayPay">立即付款</view>
		<!-- 支付选择窗口 -->
		<view class="mask" v-show="isShowMask"></view>
		<view class="pay-select" v-if="isPayShow">
			<view class="way">
				<view>请选择支付方式</view>
				<text class="close" @click="closePay">×</text>
			</view>
			<view class="time">请在0小时30分内完成支付  金额 <text>¥3728.00</text>元</view>
			<view class="select">
				<view class="wei-xin">
					<image src="/static/pay/wei_xin.jpg" mode="" class="wei"></image>
					<text>微信支付</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view>
				<view class="wei-xin">
					<image src="/static/pay/zhi_fu_bao.jpg" mode="" class="wei"></image>
					<text>支付宝支付</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view>
				<view class="wei-xin">
					<image src="/static/pay/balance.jpg" mode="" class="wei"></image>
					<text>余额（¥569）</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view>
				<button class="button-pay" @click.stop='payMent'>确认支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowMask: false, // 遮罩默认不显示
				isPayShow: false,
				payWay: [
					{
						url: '/static/pay/wei_xin.jpg',
						val: '微信支付',
						sel: '/static/pay/pay_selected.jpg'
					},
					{
						url: '/static/zhi_fu_bao.jpg',
						val: '支付宝支付',
						sel: '/static/pay/pay_selected.jpg'
					},
					{
						url: '/static/pay/balance.jpg',
						val: '余额（¥569）',
						sel: '/static/pay/pay_selected.jpg'
					}
				]
			};
		},
		methods: {
			// 关闭支付
			closePay() {
				this.isShowMask = false
				this.isPayShow = false
			},
			// 立即付款
			rightAwayPay() {
				this.isShowMask = true
				this.isPayShow = true
			},
			// 确认支付
			payMent() {
				console.log('支付中')
			}
		}
	}
</script>

<style lang="scss">
	.title-bg {
		padding: 0 36rpx;
		height: 160rpx;
		background-image: linear-gradient(90deg, #ff9c29 0%,#fe7902 100%);
		.status {
			display: flex;
			align-items: center;
			padding-top: 60rpx;
			image {
				width: 32rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
			.sta {
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #ffffff;
				display: flex;
				flex: 1;
			}
			.price {
				font-size: 38rpx;
				line-height: 32rpx;
				color: #ffffff;
			}
		}
		.qr-code {
			// width: 679rpx;
			height: 461rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 80.2rpx 0.8rpx 
				rgba(49, 49, 49, 0.07);
			border-radius: 12rpx;
			margin-top: 25rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			image {
				width: 180rpx;
				height: 180rpx;
				margin-top: 94rpx;
				margin-bottom: 40rpx;
			}
			view {
				width: 240rpx;
				height: 60rpx;
				background-color: #f1f2f6;
				border-radius: 30rpx;
				text-align: center;
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #032545;
				line-height: 60rpx;
			}
		}
	}
	.form {
		display: flex;
		background-color: #fff;
		margin-bottom: 30rpx;
		.active {
			width: 200rpx;
			height: 150rpx;
			background-color: #ffb302;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}
		.active-r {
			.title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #032545;
				display: flex;
				align-items: flex-start;
			}
			.price-pos {
				display: flex;
				margin-top: 25rpx;
				align-items: center;
				text:first-child {
					color: #fe8700;
					font-size: 32rpx;
					display: flex;
					flex: 1;
				}
				text:last-child {
					font-size: 22rpx;
					color: #666666;
				}
			}
			
		}
	}
	.list {
		font-family: SourceHanSansCN-Regular;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #9a9a9a;
		border-top: 1rpx solid #e6e6e6;
		// border-bottom: 1rpx solid #e6e6e6;
		display: flex;
		text:first-child {
			color: #9a9a9a;
			display: flex;
			flex: 1;
			padding-left: 4rpx;
		}
		text:last-child {
			color: #032545;
			padding-right: 4rpx;
		}
	}
	.apply-shop {
		display: flex;
		align-items: center;
		.title {
			display: flex;
			flex: 1;
			font-size: 28rpx;
			color: #032545;
			font-weight: 500;
			line-height: 80rpx;
		}
		text {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.more-shop {
		width: 160rpx;
		height: 49rpx;
		background-color: #ffffff;
		border-radius: 24.5rpx;
		border: 1rpx solid #b2b2b2;
		// margin-top: 28rpx;
		text-align: center;
		line-height: 49rpx;
		font-size: 22rpx;
		color: #b3b3b3;
		margin: 28rpx auto;
	}
	.more-shop:active {
		opacity: 0.9; 
	}
	.order {
		padding: 8rpx 36rpx;
		background-color: #fff;
		view {
			font-size: 24rpx;
			color: #999999;
			line-height: 60rpx;
			text:first-child {
				margin-right: 40rpx;
			}
			text:last-child {
				font-family: PingFangSC-Regular;
			}
		}
	}
	.refund-btn {
		width: 160rpx;
		height: 60rpx;
		background-color: #fe8700;
		border-radius: 30rpx;
		position: fixed;
		right: 36rpx;
		bottom:20rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
	}
	.refund-btn:active {
		opacity: 0.9; 
	}
	.pay-select {
		width: 750rpx;
		// height: 668rpx;
		background-color: #ffffff;
		// background-color: red;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9992;
		animation:popup 0.1s;
		animation-fill-mode: forwards;
		.way {
			font-family: SourceHanSansCN-Medium;
			font-size: 36rpx;
			color: #1a1a1a;
			margin-top: 49rpx;
			text-align: center;
			position: relative;
			text {
				font-size: 45rpx;
				position: absolute;
				right: 35rpx;
				top: -5rpx;
			}
		}
		.time {
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			color: #032545;
			margin-top: 50rpx;
			text-align: center;
			text {
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #fe8700;
				padding-left: 4rpx;
			}
		}
		.select {
			margin: 25rpx 36rpx 0;
			.wei-xin {
				box-sizing: border-box;
				border-bottom: 1px solid #e6e6e6;
				height: 100rpx;
				display: flex;
				align-items: center;
				.wei {
					width: 46rpx;
					height: 40rpx;
					margin-right: 18rpx;
					margin-left: 13rpx;
				}
				text {
					font-size: 30rpx;
					color: #032545;
					display: flex;
					flex: 1;
				}
				.selected {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}
			}
			.button-pay {
				width: 678rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				background-image: linear-gradient(-90deg, 
						#fe8700 0%, 
						#ff9e2c 100%), 
					linear-gradient(-89deg, 
						#e95783 0%, 
						#fe93a3 100%), 
					linear-gradient(
						#cb9e5f, 
						#cb9e5f);
				border-radius: 45rpx;
				position: fixed;
				left: 50%;
				bottom: 21rpx;
				margin-left: -339rpx;
				color: #fff;
				letter-spacing: 2rpx;
			}
		}
	}
	@keyframes popup
	{
		0%   {height:0;}
		/*50%  {height:40%;}*/
		100% {height: 668rpx;}
	}
	.mask {
		position:fixed;
		width:100%;
		height:100%;
		background-color:#000;
		opacity:0.7;
		filter:alpha(opacity=70);
		left:0;
		bottom: 0;
		z-index:9990;
	}
</style>
